<?php use_javascript("moment.min.js"); ?>
<?php use_javascript("fullcalendar.js"); ?>
<?php use_javascript("modules/public/actions.js"); ?>
<?php use_stylesheet("fullcalendar.css"); ?>
<div class="row">
    <div class="col-lg-12">
        <h2>Crear Nueva Cita</h2>
    </div>
    <div class="col-lg-5">
        <div class="panel panel-yellow">
            <div class="panel-heading">
                Formulario creacion Nueva cita
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Fecha:</label>
                        <div class="col-sm-10">
                            <div id="cita_date_txt"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Hora</label>
                        <div class="col-sm-10">
                            <input type="time" id="cita_time_txt" style="height: 24px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Medico</label>
                        <div class="col-sm-10">
                            <select id="empleado_id">
                                <?php foreach ($aEmpleadoRecordList as $oEmpleado): ?>
                                    <option value="<?php echo $oEmpleado->getIdEmpleado(); ?>"><?php echo $oEmpleado; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>                    
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="new_cita_button" type="button" class="btn btn-primary" data-url_action="<?php echo url_for("cita/createNew"); ?>">Crear Cita</button>
                            <button type="reset" class="btn btn-danger">Limpiar Formulario</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="panel panel-default">
            <div class="panel-heading">
                Consulta Horarios para mayor comodidad
            </div>
            <div class="panel-body">
                <div class="contentMiddle clear">
                    <div style="margin: 44.7px;">
                        <div class="space30"></div>
                        <div id='calendar' data-get_json_url="<?php echo url_for("public/getSchedules"); ?>"></div>
                        <div class="space30"></div>
                    </div>
                    <!-- end: contentMiddle -->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#cita_date_txt").datepicker({
            minDate: 0, 
            maxDate: "+1M +10D",
            dateFormat: "yy-mm-dd"
        });
        
        $("#new_cita_button").on('click', function(event) {
            event.preventDefault();
            var oForm = {
                'cita_date' : $("#cita_date_txt").val(),
                'cita_time' : $("#cita_time_txt").val(),
                'employee_id' : $("#empleado_id option:selected").val()
            };
            var sUrl = $(this).data("url_action");
            $.ajax({
                url: sUrl,
                type: 'post',
                dataType: 'json',
                data: oForm,
                success: function (oData) {
                    if (oData.message_list.length == 0) {
                        jsUtil.Gritter.addSuccessMessage("Cita creada satisfactoriamente!");
                        setTimeout(function() {
                            location.reload();
                        }, 3000);
                    } else {
                        for (var i = 0; i <= oData.message_list.length; i++) {
                            jsUtil.Gritter.addErrorMessage(oData.message_list[i]);
                        }
                    }
                }
            });
            return false;
        });
    });
</script>